<template>
  <div id="search">
    <Head />
    <div class="center">
      <div class="left">
        <div class="title">课程搜索</div>
        <div class="tags_title">
          <span>学科分类</span>
          <ul style="padding: 0%">
            <li
              v-for="(item, index) in categoryList"
              :key="item.id"
              @click="selectCategory(index, item.name)"
              :class="{ active: selectedIndex === index }"
            >
              {{ item.name }}
            </li>
          </ul>
          <div class="tag_sort">
          <div>标签分类</div>
          <li
            class="tags"
            @click="selectCategory('1', '计算机')"
            :class="{ active: selectedIndex === '1' }"
          >
            计算机
          </li>
          <li
          class="tags"
            @click="selectCategory('2', '数学')"
            :class="{ active: selectedIndex === '2' }"
          >
            数学
          </li>
          <li
          class="tags"
            @click="selectCategory('3', '科研')"
            :class="{ active: selectedIndex === '3' }"
          >
            科研
          </li>
          <li
          class="tags"
            @click="selectCategory('4', '文化')"
            :class="{ active: selectedIndex === '4' }"
          >
            文化
          </li>
          <li
          class="tags"
            @click="selectCategory('5', '职业')"
            :class="{ active: selectedIndex === '5' }"
          >
            职业
          </li>
          <li
          class="tags"
            @click="selectCategory('6', '教育')"
            :class="{ active: selectedIndex === '6' }"
          >
            教育
          </li>
          <li
          class="tags"
            @click="selectCategory('7', '创业')"
            :class="{ active: selectedIndex === '6' }"
          >
            创业
          </li>
          <li
          class="tags"
            @click="selectCategory('8', '安全教育')"
            :class="{ active: selectedIndex === '7' }"
          >
            安全教育
          </li>
          <li
          class="tags"
            @click="selectCategory('9', '心理健康')"
            :class="{ active: selectedIndex === '8' }"
          >
            心理健康
          </li>
          <li
          class="tags"
            @click="selectCategory('10', '信息化')"
            :class="{ active: selectedIndex === '9' }"
          >
            信息化
          </li>
          <li
          class="tags"
            @click="selectCategory('11', 'AI')"
            :class="{ active: selectedIndex === '10' }"
          >
            AI
          </li>
          <li
          class="tags"
            @click="selectCategory('12', '音乐健康')"
            :class="{ active: selectedIndex === '11' }"
          >
            音乐健康
          </li>
          <li
          class="tags"
            @click="selectCategory('13', '军事理论')"
            :class="{ active: selectedIndex === '12' }"
          >
            军事理论
          </li>
          <li
          class="tags"
            @click="selectCategory('14', 'Python')"
            :class="{ active: selectedIndex === '13' }"
          >
          Python
          </li>
          <li
          class="tags"
            @click="selectCategory('15', 'JAVA')"
            :class="{ active: selectedIndex === '13' }"
          >
            其他
          </li>
          <li
          class="tags"
            @click="selectCategory('16', '运动')"
            :class="{ active: selectedIndex === '13' }"
          >
            运动
          </li>
          <li
          class="tags"
            @click="selectCategory('17', '爱情美学')"
            :class="{ active: selectedIndex === '13' }"
          >
            爱情美学
          </li>

        </div>
        </div>
      </div>
      <div class="right" v-loading="loading">
        <div class="search_count">搜索到{{ total }}条课程</div>
        <div class="main">
          <div class="search_list">
            <div class="search_card" >
              <div
                class="search_item"
                v-for="item in searchList"
                :key="item.id"
                @click="goDetail(item.id)"
              >
                <div class="search_item_img">
                  <img
                    referrerpolicy="no-referrer"
                    :src="item.coverImage"
                    style="width: 290px; height: 210px; border-radius: 10px"
                  />
                </div>
                <div class="search_item_content">
                  <div class="search_item_title" v-html="item.title"></div>

                  <div class="search_item_desc">{{ item.description }}</div>
                  <div class="search_item_footer">
                    <div class="love">
                      <i
                        class="iconfont icon-a-tonghuashunsousuoye-reduhuo-icon"
                        style="color: red; font-size: 23px"
                      ></i
                      >{{ item.hotDegree }}
                    </div>
                    <div class="collect">
                      <i
                        class="iconfont icon-shoucang"
                        style="font-size: 23px"
                      ></i
                      >{{ item.collectCount }}
                    </div>
                    <div class="share_count">
                      <i
                        class="iconfont icon-zhuanfa"
                        style="font-size: 23px"
                      ></i
                      >{{ item.shareCount }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
      
      <script>
import Head from "../../components/head.vue";
export default {
  name: "search",
  components: {
    Head,
  },
  data() {
    return {
      categoryList: [],
      selectedIndex: null,
      searchList: [],
      total: 0,
      loading: true,
    };
  },
  methods: {
    // 获取全部类
    getAllCategory() {
      let url = "/api/resources/sort/list?0pageNum=1&pageSize=14";
      this.$http.get(url).then((res) => {
        this.categoryList = res.data.rows;
      });
    },
    // 点击分类搜索
    searchContent(name) {
      let url = "/api/es/search?key=" + name;
      this.$http.get(url).then((res) => {
        this.searchList = res.data.data.data;
        this.total = res.data.data.total;
        this.loading = false;
        // Check if the current query key is already the same as the name
        if (this.$route.query.key !== name) {
          // Only push the route if the key is different
          this.$router.push({ path: "/search", query: { key: name } });
        }
      });
    },
    // 选择分类
    selectCategory(index, name) {
      this.loading = true;
      this.selectedIndex = index; // 设置当前选中项
      this.searchContent(name); // 执行搜索
    },
    // 获取url中的参数key
    getUrlKey() {
      const keyValue = this.$route.query.key;
      this.searchContent(keyValue);
    },
    // 跳转详情页
    goDetail(id) {
      this.$router.push({
        path: "/play",
        query: {
          resourcesId: id,
        },
      });
    },
  },
  mounted() {
    this.getAllCategory();
    this.getUrlKey();
  },
};
</script>
      
<style lang="less" scoped>
#search {
  .center {
    width: 1200px;
    margin: auto;
    display: flex;
    margin-top: 50px;

    justify-content: space-between;
    .left {
      width: 30%;
      .title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }
      .tags_title {
        height: 500px;
        width: 245px;
        margin-top: 20px;
        padding: 12px 16px; /* 内边距 */
        // background: #fff; /* 背景颜色 */
        border-radius: 8px; /* 圆角 */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
        border: 1px solid #ddd; /* 边框 */
        display: inline-block; /* 让卡片大小适应内容 */
        color: #333; /* 文字颜色 */

        span {
          font-size: 16px;
          font-weight: bold;
          color: #333;
        }
        ul {
          overflow: hidden;
          li {
            float: left;
            margin-right: 20px;
            margin-bottom: 15px;
            color: #6a6464;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
          }

          .active {
            background-color: #007bff; /* 选中后的背景色 */
            color: white; /* 选中后的文字颜色 */
            border-radius: 5px;
          }
          li:hover {
            color: #3776da;
          }
        }
      }
    }
    .right {
      width: 70%;
      .search_count {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }
    }
  }
}
.main {
  .search_list {
    margin-top: 20px;
    .search_card {
      .search_item {
        display: flex;
        width: 290px;
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
        cursor: pointer;
        .search_item_img {
          width: 290px;
          height: 210px;
          border-radius: 10px;
        }
        .search_item_content {
          width: 530px;
          padding: 10px;
          margin-left: 10px;
          .search_item_title {
            width: 530px;
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-top: -12px;
            cursor: text;
            em {
              color: red;
              font-weight: bold; /* 可选，让加粗更明显 */
            }
          }
          .search_item_desc {
            width: 530px;
            font-size: 14px;
            color: #6a6464;
            margin-top: 15px;
            height: 120px;
            cursor: text;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
          }
        }
        .search_item_footer {
          width: 530px;
          margin-top: 24px;
          .love {
            float: left;
            width: 100px;
            height: 20px;
            margin-right: 35px;
          }
          .collect {
            float: left;
            width: 100px;
            height: 20px;
            margin-right: 35px;
          }
          .share_count {
            float: left;
            width: 100px;
            height: 20px;
          }
        }
      }
    }
  }
}
.search_item_title /deep/ em {
  color: red;
}

/deep/ .head_center {
  display: none;
}
/deep/ .header {
  height: 50px;
}
.icon-zhuanfa:hover {
  color: #ccc;
}
.icon-shoucang:hover {
  color: #ccc;
}
.tag_sort {
  margin-top: 10px;
  border-top: 1px solid #ddd;
  /deep/.tags {
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    color: #6a6464;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
  }
  .tags:hover {
    color: #3776da;
  }
  .active {
    background-color: #007bff;
    color: white;
    border-radius: 5px;
  }
}
</style>
      